<template>
  <custom-form
    v-model:form="form"
    v-model:visible="visible"
    :config-list="formConfig"
    :height="500"
    :width="600"
    title="菜单管理"
    @confirm="handleConfirm"
  />
</template>

<script lang="ts" setup>
  const emits = defineEmits(['update:visible'])
  const props = withDefaults(
    defineProps<{
      visible: boolean
      menuList: Menu[]
    }>(),
    {
      visible: false,
      menuList: () => []
    }
  )

  const visible = computed({
    get: () => props.visible,
    set: value => {
      emits('update:visible', value)
    }
  })
  const formConfig = ref<FormRenderConfig[]>([
    {
      label: '上级菜单',
      key: 'parentId',
      span: 24,
      type: 'treeSelect',
      options: props.menuList
    },
    {
      label: '菜单名称',
      key: 'name',
      span: 24,
      type: 'input'
    },
    {
      label: '类型',
      key: 'type',
      span: 12,
      type: 'radio',
      options: [
        { label: '目录', value: 1 },
        { label: '菜单', value: 2 },
        { label: '权限', value: 3 }
      ]
    },
    {
      label: '排序',
      key: 'sort',
      span: 12,
      type: 'number'
    },
    {
      label: '路由地址',
      key: 'router',
      span: 12,
      type: 'input'
    },
    {
      label: '权限标识',
      key: 'permission',
      span: 12,
      type: 'input'
    }
  ])

  const form = ref<Record<string, any>>({ type: 1 })

  // 保存
  const handleConfirm = async () => {
    const submitForm = Object.assign({}, form.value)
    await $dialog('是否确认提交？')
    await http.post('/menu', submitForm)
    $message.success('添加成功')
  }

  const { $dialog, $message } = useFastNaive()
</script>

<style scoped lang="scss"></style>
